<template>
  <div>
    <el-dialog :visible="true" :title="title" class="add_case_dialog" width="40%" :before-close="callOf">
      <el-form ref="form" :model="sizeForms" :rules="formrules" label-width="100px">
        <el-form-item label="节点名称" prop="node_name" label-width="140px">
          <el-input ref="node_name" v-model="sizeForms.node_name" class="add" placeholder="请输入节点名称" />
        </el-form-item>
        <el-form-item label="节点IP" prop="ipv4" label-width="140px">
          <el-input ref="ipv4" v-model="sizeForms.ipv4" class="add" placeholder="请输入节点IP" />
        </el-form-item>
        <el-form-item label="节点端口" prop="ipv4_port" label-width="140px">
          <el-input ref="ipv4_port" v-model="sizeForms.ipv4_port" class="add" placeholder="请输入节点端口" />
        </el-form-item>
        <div />
        <el-form-item label="回调IP" prop="callback_ip4" label-width="140px">
          <el-input ref="callback_ip4" v-model="sizeForms.callback_ip4" class="add" placeholder="请输入回调地址IP" />
        </el-form-item>
        <el-form-item label="回调端口" prop="callback_ipv4_port" label-width="140px">
          <el-input ref="callback_ipv4_port" v-model="sizeForms.callback_ipv4_port" class="add" placeholder="请输入回调端口" />
        </el-form-item>
        <div />
        <el-form-item label="系统" prop="system" label-width="140px">
          <el-input ref="system" v-model="sizeForms.system" class="add" placeholder="请输入系统名称" />
        </el-form-item>
        <el-form-item label="备注" prop="content" label-width="140px">
          <el-input ref="content" v-model="sizeForms.content" class="add" placeholder="请输入备注" />
        </el-form-item>
        <div />
        <el-form-item>
          <el-button type="primary" @click="dialogFormAdd('form')">保存</el-button>
          <el-button type="primary" @click="callOf('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { getGroupName, getProjectName } from '@/api/report'
import { insert_node, update_node } from '@/api/node'

export default {
  name: 'Task',
  props: {
    // dialogAdd: Object,
    sizeForms: {
      type: Object,
      required: true
    },
    edit: Boolean,
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formrules: {
        node_name: [
          { required: true, message: '节点名称不能为空', trigger: 'blur' }
        ],
        ipv4: [
          { required: true, message: '节点IP不能为空', trigger: 'blur' }
        ],
        ipv4_port: [
          { required: true, message: '节点端口不能为空', trigger: 'blur' }
        ],
        callback_ip4: [
          { required: true, message: '回调地址IP不能为空', trigger: 'blur' }
        ],
        callback_ipv4_port: [
          { required: true, message: '回调端口不能为空', trigger: 'blur' }
        ],
        system: [
          { required: true, message: '系统不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getGroupName()
  },
  methods: {
    dialogFormAdd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.edit) {
            update_node({
              id: this.sizeForms.id,
              node_name: this.sizeForms.node_name,
              ipv4: this.sizeForms.ipv4,
              callback_ip4: this.sizeForms.callback_ip4,
              ipv4_port: this.sizeForms.ipv4_port,
              callback_ipv4_port: this.sizeForms.callback_ipv4_port,
              system: this.sizeForms.system,
              content: this.sizeForms.content
            })
              .then((res) => {
                Message.success(res.message)
                this.callOf()
                this.$parent.getList()
              })
              .catch((err) => {
                Message.error(err.msg || err.message || err.value)
              })
          } else {
            insert_node({
              node_name: this.sizeForms.node_name,
              ipv4: this.sizeForms.ipv4,
              callback_ip4: this.sizeForms.callback_ip4,
              ipv4_port: this.sizeForms.ipv4_port,
              callback_ipv4_port: this.sizeForms.callback_ipv4_port,
              system: this.sizeForms.system,
              content: this.sizeForms.content
            }).then((res) => {
              if (res.code === 20000) {
                Message.success(res.message)
              } else {
                Message.error(res.message)
              }
              this.callOf()
              this.$parent.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    getProjectName(groudId) {
      var group_id = ''
      for (const i in this.sizeForms.gns) {
        if (this.sizeForms.gns[i].group_name === groudId) {
          group_id = this.sizeForms.gns[i].group_id
          break
        }
      }
      getProjectName(group_id)
        .then((res) => {
          this.projtctOptions = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getGroupName() {
      getGroupName()
        .then((res) => {
          this._data.options = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    selectOne(groudId) {
      this.getProjectName(groudId)
    },
    callOf() {
      this.$emit('closePop')
    }
  }
}

</script>
<style>
.add {
  width: 100%;
}

</style>
